<script setup>
import flowChart from './flowchart.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  xml: {
    type: String,
    default: ''
  }
})
const dialogVisible = computed(() => props.visible)


const emit = defineEmits(['closeDialog'])
const handleClose = () => {
  emit('closeDialog')
}
const activeName = ref('flowchart')


</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="流程图" width="80vw" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <el-tabs v-model="activeName">
        <el-tab-pane label="流程图" name="flowchart">
          <el-scrollbar height="70vh">
            <flowChart :xml="props.xml + ''" />
          </el-scrollbar>
        </el-tab-pane>


        <el-tab-pane label="xml" name="xml">
          <el-scrollbar height="70vh">
            <span class="xml-text">{{ props.xml }}</span>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.xml-text {
  white-space: pre-wrap;
}
</style>